<template>
  <view class="wh100">
    <picker
      @change="(e) => stnmCG(e.detail.value)"
      :value="selectIndex"
      :range="areaList"
      :range-key="rangeKey"
    >
      <view class="pick-input">
        <image
          src="../../static/images/decision/place.png"
          mode=""
          style="width: 21rpx; height: 24rpx"
        />
        <text class="ml10"> {{ selectName }}</text>
        <tui-icon
          :size="20"
          color="#007AFF"
          class="click-icon"
          name="arrowdown"
        >
        </tui-icon>
      </view>
    </picker>
  </view>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "",
  props: {
    rangeKey: {
      type: String,
      default: "value",
    },
    no: {
      type: Array,
      default: () => [],
    },
    isCity: {
      type: Boolean,
      default: true,
    },
    value: {
      type: null,
      default: null,
    },
    // 是否加载第一次
    isOnLoad: {
      type: Boolean,
      default: true,
    },
  },
  components: {},
  data() {
    return {
      dropdownShow: false,
      areaList: [],
      areaName: "请选择",
      selectIndex: "",
      selectName: "",
    };
  },
  methods: {
    ...mapActions({
      getCounty: "getCounty",
    }),

    async initTowns(areaCode) {
      // uni.showLoading({
      //     title: '加载县市',
      // })
      try {
        const apiRes = await this.getCounty(true);
        this.areaList = apiRes.filter((item) => {
          return this.no.indexOf(item.areaName) == -1;
        });
        if (this.isOnLoad) {
          this.stnmCG(0);
        }
        if (areaCode) {
          const index = this.areaList.findIndex((t) => {
            return t.areaCode == areaCode;
          });
          let item = this.areaList[index];
          if (item) {
            this.selectName = item[this.rangeKey];
            this.selectIndex = index;
          }
        }
      } catch (error) {
        // this.$hideLoading()
      }
    },
    stnmCG(index) {
      // console.log(`selectNameselectName:`, item)
      // this.dropdownShow = false
      this.selectIndex = index;
      const items = this.areaList[index];
      this.selectName = items.areaName;
      this.$emit("change", items);
      this.$emit("update:value", items.areaCode);
    },
    setValue() {
      console.info(`this.value:`, this.value);
      const index = this.areaList.findIndex((t) => {
        return t.areaCode == this.value;
      });

      let item = this.areaList[index];
      if (item) {
        this.selectName = item[this.rangeKey];
        this.selectIndex = index;
      }
    },
  },
  computed: {},
  mounted() {
    this.initTowns();
  },
  watch: {
    value() {
      this.setValue();
    },
  },
};
</script>
<style lang="scss">
.dropdown_list {
  display: flex;
  justify-content: center;
  width: 100%;
  .select-click {
    display: flex;
    // justify-content: space-around;
    justify-content: center;
    align-items: center;
    text-align: right;
    border: 1rpx solid #b3b3b3;
    border-radius: 50rpx;
    width: 100%;
    height: 50rpx;
    text-align: center;
    white-space: nowrap;
    font-size: 24rpx;
    padding: 17rpx 10rpx;
    .select-font {
      font-size: 24rpx;
      color: #000;
    }
  }
  .tuilist-box {
    box-sizing: border-box;
    padding: 2rpx;
    // background: #79b5ff;
  }
  .tui-list-class {
    text-align: center;
    padding: 15rpx !important;
  }
}
/deep/.tui-dropdown-view {
  border: 1rpx solid #79b5ff;
}
.pick-input {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 26rpx;
}
</style>
